<template>
  <div class="liveMoreSearchLPicRText">
    <ZxyhHeader
      v-if="$channel == 'zxyh'"
      :title="''"
      :isClose="false"
      :isSearch="true"
      @formChildMsg="searchTrue"
    ></ZxyhHeader>
    <div class="liveMoreTitle">
      <div class="search-wrap searchShow">
        <form action="javascript:return true;">
          <input
            type="search"
            v-model="searchKeyword"
            @keyup.13="handelSearch"
            ref="inputSearch"
          />
        </form>
        <Iconfont iconClass="sousuo " />
        <div class="cancel" @click="handelBack">取消</div>
      </div>
    </div>

    <GreatVideCom
      :class="isIos ? 'great-video-box-ios' : ''"
      :boxTopIsShown="false"
      :VideoListArray="videoItem"
      v-if="videoItem"
    />
    <!-- <div class="searchResult">
			<cube-scroll v-if="videoItem.length > 0" :data="videoItem" ref="scroll" :options="scrollOptions" :scroll-events="['scroll']" @scroll="onScrollHandle" @pulling-up="onPullingUp()">
				<ul class="h-great-list">
					<li v-for="(v, index) in videoItem" @click="clickLookBack(v.id,v.vid)" :key="index">						
						<template v-if="v.imagUrl">
							<img :src="v.imagUrl+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" @load="onImgLoad()">
						</template>
						<template v-else>
							<img :src="v.bgimg+'?x-oss-process=image/resize,m_fixed,h_187,w_330'" @load="onImgLoad()">
						</template>
						<p>{{v.title}}</p>
					</li>
				</ul>

			</cube-scroll>
			<div v-else class="searchNone">
				<img src="../assets/images/searchNone.png" alt="">
				<p>没有找到相关视频</p>
			</div>
		</div> -->
  </div>
</template>

<script>
import Vue from "vue";
import GreatVideCom from "@/zxyhPages/newHomeCom/greatVideoCom.vue";

import ZxyhHeader from "@/components/zxyh/zxyhHeader";
export default {
  components: {
    ZxyhHeader,
    GreatVideCom,
  },
  data() {
    return {
      wherePage: "", //来自哪个页面
      videoItem: [],
      totalPage: true,
      nowPageNum: 1,
      disabled: false,
      checkType: "",
      secondStop: 26,
      scrollOptions: {
        pullDownRefresh: false,
        pullUpLoad: {
          threshold: 60,
          txt: {
            more: "加载更多",
            noMore: "没有更多数据",
          },
        },
        scrollbar: true,
      },
      pullDownY: 0,
      pullDownStyle: "",
      scrollToY: 0,
      opacityStyle: "",
      search: false,
      maskShow: false,
      searchKeyword: "", //搜索关键字
      type: "", //分类
    };
  },
  created() {
    window.scrollTo(0, 0);
    this.dotNum();
    this.wherePage = this.$route.query.page;
    this.searchKeyword = this.$route.query.content || "";
    this.type = this.$route.query.type || "";
    this.getAllData(this.type, this.searchKeyword);
    //console.log(this.$route.query)
  },
  mounted() {
    this.$store.dispatch("hideNav");
  },
  methods: {
    dotNum() {
      //统计
      let _this = this;
      var argumentData = {
        sessionId: "liveMoreSearch_page", //场次id
        streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
        actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
        playSource: fun.getPlatform(), //微信 app
        url: window.location.href, //当前的url
      };
      _this.$http
        .post("/h5live/recordData", argumentData, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then(
          (res) => {
            //console.log(res)
          },
          (err) => {
            console.log(err);
          }
        );

      if (this.$channel === "gyzq") {
        if (this.$store.state.gyzqIsApp) {
          TalkingData.onPage("p_zbjcspsearch_01");
        } else {
          TDAPP.onCustomPage("p_zbjcspsearchh5_01", "精彩视频搜索结果页");
        }
      }
    },
    //初始化数据
    getAllData(type, content) {
      if (this.wherePage == "eduPage") {
        //乐知教育页面
        this.$http
          .get("/h5live/getTspdVideos", {
            params: {
              page: this.nowPageNum,
              pageSize: 10,
              typeId: this.$route.query.id,
              gradeId: "",
              cityId: "",
              tagsId: "",
              title: content,
            },
          })
          .then((res) => {
            if (res.data.code == "000000") {
              if (res.data.data && res.data.data.length > 0) {
                this.videoItem = this.videoItem.concat(res.data.data);
              } else {
                this.totalPage = false;
                // console.log(this.scrollToY);
                if (this.$refs.scroll) {
                  this.$refs.scroll.forceUpdate();
                }
              }
            }
          })
          .catch((response) => {
            this.isSearchNone = true;
            console.log(response);
          });
      } else {
        //精彩视频页面
        this.$http
          .get("/h5live/getHomeVideo", {
            params: {
              p: this.nowPageNum,
              type,
              content,
            },
          })
          .then(
            (res) => {
              if (res.data.code == "000000") {
                if (res.data.data && res.data.data.length > 0) {
                  this.videoItem = this.videoItem.concat(res.data.data);
                } else {
                  this.totalPage = false;
                  // console.log(this.scrollToY);
                  if (this.$refs.scroll) {
                    this.$refs.scroll.forceUpdate();
                  }
                }
              } else {
                console.log(err);
              }
            },
            (err) => {
              console.log(err);
            }
          );
      }
    },
    //向上滑
    onPullingUp() {
      if (this.totalPage) {
        // 如果有新数据
        this.nowPageNum++;
        this.getAllData(this.type, this.searchKeyword);
      } else {
        // 如果没有新数据
        this.$refs.scroll.forceUpdate();
      }
    },
    onImgLoad() {
      this.$refs.scroll.refresh();
    },
    //跳转回看详情页面
    clickLookBack(id, vid) {
      if (this.wherePage == "eduPage") {
        //乐知教育进来
        this.$router.push({
          path: `/${this.$channel}/lookBack_particulars/${vid}`,
        });
      } else {
        //精彩视频进来
        this.$router.push({
          path: `/${this.$channel}/lookBack_particulars/${id}`,
        });
      }
    },
    onScrollHandle(pos) {
      //   this.pullDownY = pos.y;
      if (pos.y > 0) {
        this.pullDownStyle = `top:0px`;
      }
    },
    //回到上一页
    handelBack() {
      if (this.wherePage == "eduPage") {
        //this.$router.push(`/${this.$channel}/educationHome`);
        this.$router.push({
          path: `/${this.$channel}/educationHome`,
          query: {
            //父标签的id
            id: this.$route.query.id,
          },
        });
      } else {
        if (this.$channel == "zyzq") {
          this.$router.push({
            path: `/${this.$channel}/geratMoVideo`,
            query: {
              sel: this.$route.query.sel,
              parId: this.$route.query.parId, //父级id
            },
          });
        } else if (this.$channel == "zxyh") {
          this.$router.push({
            path: `/${this.$channel}/moreVideo`,
            query: {
              sel: this.$route.query.sel,
              parId: this.$route.query.parId, //父级id
            },
          });
        } else {
          this.$router.push({
            path: `/${this.$channel}/geratMoreVideo`,
            query: {
              sel: this.$route.query.sel,
              parId: this.$route.query.parId, //父级id
            },
          });
        }
      }
    },
    searchFalse() {
      this.search = false;
      this.maskShow = false;
      this.searchKeyword = "";
    },
    //开始搜索
    handelSearch() {
      this.maskShow = false;
      this.$refs.inputSearch.blur();
      this.videoItem = [];
      this.getAllData(this.type, this.searchKeyword);
    },
  },
  computed: {},
};
</script>

<style scoped="scoped">
.navBlock .cube-scroll-content {
  display: block;
}

.cube-scroll-content {
  display: inline-block;
}

.cube-scroll-list-wrapper {
  min-height: 0;
}

.h-great-list {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100%;
  padding: 0 30px;
  font-size: 0;
  padding-bottom: 10px;
}

.h-great-list li {
  width: 330px;
  margin-top: 22px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
  background: rgba(255, 255, 255, 1);
  /*box-shadow: 0px 2px 8px 2px rgba(8, 9, 6, 0.1);
  border-radius: 10px;*/
}

.h-great-list li:nth-child(even) {
  margin-left: 30px;
}

.h-great-list li img {
  width: 100%;
  height: 187px;
  border-radius: 24px;
}

.h-great-list li p {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  line-height: 40px;
  vertical-align: middle;
  font-size: 26px;
  text-align: justify;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.liveMoreTitle {
  font-size: 34px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  margin: 15px 0;
  display: block;
  position: relative;
}

.liveMoreTitle .toBack {
  margin-right: 35px;
  display: inline-block;
  position: absolute;
  left: 10px;
}

.liveMoreTitle .toBack i {
  font-size: 34px;
  color: #000;
  padding: 10px;
}

.search-wrap {
  display: flex;
  padding-left: 20px;
  align-items: center;
  opacity: 0;
}

.search-wrap.searchShow {
  opacity: 1;
}

.search-wrap i {
  position: absolute;
  left: 50px;
  font-size: 30px;
  color: #666;
  top: 2px;
}

.search-wrap input {
  width: 620px;
  height: 60px;
  background: rgba(246, 246, 246, 1);
  border-radius: 30px;
  background: #f6f6f6;
  box-sizing: border-box;
  padding-left: 80px;
  font-size: 28px;
}

.search-wrap .cancel {
  margin-left: 30px;
  font-size: 28px;
  color: #333;
}

.begin-search {
  font-size: 40px;
  position: absolute;
  right: 40px;
  top: 0px;
}
/*清除谷歌浏览器下的 search 叉号 */

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/*清除IE下的 search 叉号 */

input[type="search"]::-ms-clear {
  display: none;
}

.searchResult {
  height: calc(100vh - 130px);
  transform: rotate(0deg);
  overflow: hidden;
}

.searchNone {
  text-align: center;
  margin-top: 30vh;
}

.searchNone img {
  width: 232px;
}

.searchNone p {
  color: #444;
  font-size: 32px;
  margin-top: 55px;
}
.header-conatiner-zxyhIos ~ .searchResult {
  height: calc(100vh - 278px);
}
.header-conatiner ~ .searchResult {
  height: calc(100vh - 190px);
}



.liveMoreSearchLPicRText	.header-conatiner-zxyhIos,
.header-conatiner {
  overflow: hidden;
  position: relative;
  /* position: fixed; */
  left: 0px;
  top: 0px;
  /* background: url('../../zxyhPages/newHomeCom/zxyhBG.png') no-repeat center; */
  background-size: cover;
}

</style>